<template>
  <div id="section-index">
    <div style="float:left;width: 700px;display: inline-block">
      <div
        style="margin-left: 30px;background: #f0f0f0;border: 1px #b3b3b3 solid;padding-left: 30px;border-radius: 8px">
        <h3>目录</h3>
      </div>
      <div style="margin-left: 30px;border: 1px #b3b3b3 solid;padding: 30px;border-radius: 8px;">
        <el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
      </div>
    </div>
    <div style="float: right;width: 500px;margin-right: 170px;">
      <el-input v-model="input" placeholder="新建话题" @click.native="handleClick" style="margin-left: 43px"></el-input>
      <div v-show="show" style="margin-top: 20px;margin-left: 43px">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="textarea1">
        </el-input>
        <div style="margin-top: 10px">
          <el-button plain size="small" icon="el-icon-plus">添加附件</el-button>
          <el-button plain size="small" icon="el-icon-plus">添加录音</el-button>
          <el-button type="success" size="small" icon="el-icon-check" @click="release()">发布</el-button>
          <el-button type="info" plain size="small" icon="el-icon-plus" @click="handleClick">取消</el-button>
        </div>
      </div>
      <div>
        <ul style="list-style: none;width: 100%">
          <li v-for="(discuss,index) in discusses" v-if="index<2"
              style="border: 1px solid #b3b3b3;padding: 20px;margin-bottom: 5px;background-color: #efefef">
            <img :src="require(`@/assets/${discuss.userHead}`)"
                 style="width: 60px;border-radius: 100%;float: left;margin-left:10px"
                 @click="discussId(index)">
            <div style="margin-left: 100px">
              <p>
                <span style="color:#7a9e31;">{{ discuss.userName }}&nbsp;</span>
                <span style="font-size: 10px">{{ discuss.gmtCreate }}</span>
              </p>
              <h3>{{ discuss.courseTalkTitle }}</h3>
              <el-button type="success" plain @click="addgreat(index)">赞({{ discuss.great }})</el-button>
              <el-button type="success" plain @click="todiscussInfo(index)">回复</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Discuss from "./Discuss";
import axios from "axios";

export default {
  name: "SectionIndex",
  components: {
    Discuss
  },
  data() {
    return {
      input: '',
      show: false,
      textarea1: '',
      discusses: [],
      datas: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      let value={
        sectionContent:data.sectionContent,
        label:data.label
      }
      this.$store.commit('updatesection',value)
      let routerUrl = this.$router.resolve({
        path: '/SectionContent'
      })
      window.open(routerUrl.href)
    },
    handleClick() {
      this.show = !this.show
    },
    discussId(index) {
      console.log(index);
    },
    addgreat(index) {
      this.discusses[index].great++;
      this.courseTalkId=this.discusses[index].courseTalkId
      console.log(this.courseTalkId)
      this.great=this.discusses[index].great
      console.log(this.great)
      axios('/course/savegreat', {
        params: {
          courseTalkId: this.courseTalkId,
          great:this.great
        },
        method: 'post'
      }).then(res => {
        console.log(res.data)
      }).catch(function (error) {
        console.log(error);
      });
    },
    release(){
      axios('/course/addtalk', {
        params: {
          courseId: localStorage.getItem('courseIndex'),
          courseTalkTitle:this.input,
          courseTalkContent:this.textarea1,
          userId:localStorage.getItem('userId')
        },
        method: 'post'
      }).then(res => {
        location.reload()
      }).catch(function (error) {
        console.log(error);
      });
    },
    todiscussInfo(index){
      let info={
        courseTalkTitle:this.discusses[index].courseTalkTitle,
        courseTalkNumber:this.discusses[index].courseTalkNumber,
        userName:this.discusses[index].userName,
        gmtCreate:this.discusses[index].gmtCreate,
        great:this.discusses[index].great,
        userHead:this.discusses[index].userHead,
        courseTalkContent: this.discusses[index].courseTalkContent
      }
      this.$store.commit('updatediscussInfo',info)
      this.$router.push('discussinfo')
    }
  },
  mounted() {
    axios('/section/show', {
      params: {
        courseId: localStorage.getItem('courseIndex')
      },
      method: 'Get'
    }).then(res => {
      console.log(res.data)
      this.datas = res.data.data
    }).catch(function (error) {
      console.log(error);
    });

    axios('/course/talk', {
      params: {
        courseId: localStorage.getItem('courseIndex')
      },
      method: 'get'
    }).then(res => {
      console.log(res.data)
      this.discusses = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
#section-index {
  margin-left: 100px;
}
</style>
